<template>
  <div class="goodsDetails" style="animation-duration: 500ms">
    <div class="goodsdeta_main">
      <!-- 商品详情展示盒子 -->
      <el-card
        style="overflow:visible"
        shadow="never"
        v-loading="infoloading"
        :body-style="{
          padding: '30px'
        }"
      >
        <div class="show_Box">
          <!-- <div class="error_box" @click="showerrorbox">
            <i class="el-icon-warning"></i>
            <span style="font-size:14px;color:gray">纠错</span>
          </div>-->
          <div class="showgoods">
            <div class="demo-image__lazy">
              <a
                :href="goodsInfo.goods_url"
                target="_blank"
                rel="noopener noreferrer"
              >
                <el-image
                  style="width:420px;border-radius:10px"
                  fit
                  :src="goodsInfo.goods_img"
                  lazy
                >
                  <div slot="placeholder" class="image-slot">
                    <Goodsloading></Goodsloading>
                  </div>
                  <div slot="error" class="image-slot">
                    <!-- <i class="el-icon-picture-outline"></i> -->
                  </div>
                </el-image>
              </a>
            </div>
          </div>
          <!-- 商品详情 -->
          <div class="goods_right">
            <!-- 商品标题 -->
            <div class="goods_title">
              <div class="title_left">
                <div class="brand_box">
                  {{ goodsInfo.brand_name }}
                </div>
                <!-- <img
                  style="width: 20px;"
                  :src="require('@/assets/images/01.png')"
                  alt=""
                />-->
                <a
                  :href="goodsInfo.goods_url"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <div class="shortname">
                    {{ goodsInfo.goods_short_name }}
                  </div>
                </a>
              </div>
              <div>
                <div class="tagshop" v-if="goodsInfo.goods_type == 1">
                  自营店铺
                </div>
                <div class="tagshop" v-if="goodsInfo.goods_type == 2">
                  拼购
                </div>
                <div class="tagshop" v-if="goodsInfo.goods_type == 3">
                  POP
                </div>
              </div>
              <div class="error_box" @click="errorshow=true"><i class="el-icon-warning"></i>纠错</div>
              <!-- 弹窗 -->
              <el-dialog
                title="感谢您对商品进行纠错:"
                :visible.sync="errorshow"
                width="600px"
              >
                <el-form :model="form" style="text-align:left">
                  <el-form-item label="纠错商品:" label-width="120px">
                    <div style="margin-left:10px;font-size: 16px;">
                      {{ goodsInfo.goods_short_name }}
                    </div>
                  </el-form-item>
                  <el-form-item label="问题类型:" label-width="120px">
                    <el-select v-model="form.type" placeholder="请选择问题类型">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="问题描述:" label-width="120px">
                    <el-input
                      v-model="form.desc"
                      autocomplete="off"
                      type="textarea"
                      rows="4"
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="问题截图:" label-width="120px">
                    <div>
                      <div
                        style="display:flex;justify-content:flex-start;align-items:center"
                      >
                        <div style="width:100px;height:100px">
                          <el-upload
                            class="avatar-uploader"
                            action="https://jfk-api.letuilm.com/api/upload_img"
                            :on-success="handleAvatarSuccess2"
                            :on-remove="handleRemove2"
                            :limit="3"
                            :multiple="true"
                            :show-file-list="false"
                            :before-upload="beforeAvatarUpload"
                          >
                            <!-- list-type="picture" -->
                            <!-- :on-preview="handlePreview" -->
                            <!-- :file-list="dishonestList" -->
                            <div
                              style="width:100px;height:100px;border:1px solid #000;line-height:100px"
                            >
                              <i class="el-icon-plus avatar-uploader-icon"></i>选填
                            </div>
                          </el-upload>
                        </div>
                        <div style="height:100px;margin-left:10px">
                          <el-image
                            v-for="(item, index) in errorList"
                            :key="index"
                            style="width: 100px; height: 100px;"
                            :src="item"
                            :preview-src-list="errorList"
                          >
                          </el-image>
                        </div>
                      </div>
                      <div style="color:red;">
                        最多可上传3张图片(选填)<br/>
                        *感谢您的反馈!我们会尽快处理
                      </div>
                    </div>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dosumbit">提 交</el-button>
                </div>
              </el-dialog>
            </div>
            <!-- 推广文案 -->
            <div class="goods_info">{{ goodsInfo.goods_copywriting }}</div>
            <div class="juan_Box">
              <!-- <div class="juannum">
                <div class="geted">
                  <span> {{ goodsInfo.coupon_collar_count }}人已领劵 </span>
                </div>
                <div style="margin-right:10px">
                  <span style="font-size:14px;color:#c3c3c3;">
                    近30天引入量
                  </span>
                  {{ goodsInfo.goods_day_num }}
                </div>
              </div>-->
              <!-- 优惠信息 -->
              <div class="top_data">
                <div class="data_box">
                  <p class="data_top">
                    <span style="font-size:20px">¥</span>
                    {{ goodsInfo.goods_after_price }}
                  </p>
                  <p class="data_main" style="text-decoration: line-through;">
                    ¥ {{ goodsInfo.goods_price }}
                  </p>
                  <p class="data_bot">劵后价</p>
                </div>
                <div class="data_box">
                  <p class="data_top">
                    {{ goodsInfo.commission_bl }}
                    <span style="font-size:20px">%</span>
                  </p>
                  <p class="data_main">
                    预估佣金:¥{{
                      (
                        goodsInfo.goods_price *
                        (goodsInfo.commission_bl / 100)
                      ).toFixed(2)
                    }}
                  </p>
                  <p class="data_bot">佣金比</p>
                </div>
                <div class="data_box">
                  <p class="data_top">
                    <span style="font-size:20px">¥</span>
                    {{ goodsInfo.coupon_discount }}
                    <a
                      style="cursor: pointer;"
                      :href="goodsInfo.coupon_url"
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <el-button
                        size="mini"
                        class="round_btn"
                        round
                      >领取</el-button
                      >
                    </a>
                  </p>
                  <p class="data_main">
                    有效期至:
                    {{
                      (goodsInfo.coupon_end_time * 1000)
                        | formatTime('yyyy-MM-dd hh:mm:ss')
                    }}
                  </p>
                  <p class="data_bot">
                    优惠券
                    <span
                      style="color: #999;"
                    >(剩余{{ goodsInfo.coupon_surplus_num }} 张)</span
                    >
                  </p>
                </div>
              </div>
            </div>
            <!-- 商店信息 -->
            <div class="shops_box" style="height:70px">
              <div class="shops_left">
                <div style="padding-bottom:8px">{{ goodsInfo.shop_name }}</div>
                <!-- <el-progress
                  :percentage="parseFloat(goodsInfo.good_review)"
                ></el-progress> -->
              </div>
              <div class="shops_right">
                <div class="item_evaluate">
                  <div class="titem_itle">综合体验</div>
                  <span
                    :style="{
                      color: goodsInfo.experience >= 4.5 ? 'red' : 'green'
                    }"
                  >
                    {{ goodsInfo.experience }}
                    <i
                      v-if="goodsInfo.experience >= 4.5"
                      class="el-icon-caret-top"
                    ></i>
                    <i v-else class="el-icon-caret-bottom"></i>
                  </span>
                </div>
                <div class="item_evaluate">
                  <div class="titem_itle">售后服务</div>
                  <span
                    :style="{
                      color: goodsInfo.after_service >= 4.5 ? 'red' : 'green'
                    }"
                  >
                    {{ goodsInfo.after_service }}
                    <i
                      v-if="goodsInfo.after_service >= 4.5"
                      class="el-icon-caret-top"
                    ></i>
                    <i v-else class="el-icon-caret-bottom"></i>
                  </span>
                </div>
                <div class="item_evaluate">
                  <div class="titem_itle">物流履约</div>
                  <span
                    :style="{
                      color: goodsInfo.logistics >= 4.5 ? 'red' : 'green'
                    }"
                  >
                    {{ goodsInfo.logistics }}
                    <i
                      v-if="goodsInfo.logistics >= 4.5"
                      class="el-icon-caret-top"
                    ></i>
                    <i v-else class="el-icon-caret-bottom"></i>
                  </span>
                </div>
                <div class="item_evaluate">
                  <div class="titem_itle">用户评分</div>
                  <span
                    :style="{
                      color: goodsInfo.user_pj >= 4.5 ? 'red' : 'green'
                    }"
                  >
                    {{ goodsInfo.user_pj }}
                    <i
                      v-if="goodsInfo.user_pj >= 4.5"
                      class="el-icon-caret-top"
                    ></i>
                    <i v-else class="el-icon-caret-bottom"></i>
                  </span>
                </div>
                <div class="item_evaluate">
                  <div style="cursor:pointer;">
                    <img
                      :src="require('@/assets/imgs/babyask.png')"
                      alt
                      srcset
                    />
                  </div>
                  <span>(累计{{ goodsInfo.comments }})</span>
                </div>
                <div style="cursor:pointer;color:black;" @click="openevaluate">
                  <span>查看评论 <i class="el-icon-arrow-right"></i></span>
                </div>
              </div>
            </div>
            <!-- 销量信息 -->
            <div class="shops_box">
              <div
                class="shops_right"
                style="justify-content: space-between;width:90%"
              >
                <div class="item_evaluate">
                  <span class="titem_itle">月销量:</span>
                  <span style="color:blue">
                    {{ goodsInfo.month_goods_num }}
                  </span>
                </div>
                <div class="item_evaluate">
                  <span class="titem_itle">日销量:</span>
                  <span style="color:blue">
                    {{ goodsInfo.today_coupon_num }}
                  </span>
                </div>
                <div class="item_evaluate">
                  <span class="titem_itle">近两小时销量:</span>
                  <span style="color:blue">{{ goodsInfo.goods_today_xl }}</span>
                </div>
              </div>
            </div>
            <!-- 按钮组 -->
            <div class="btns">
              <el-popover
                popper-class="popover"
                placement="right"
                width="300"
                trigger="hover"
              >
                <div class="position_hover" id="goodsinfo">
                  <div class="demo-image__lazy">
                    <el-image
                      style="width:90px"
                      fit
                      :src="goodsInfo.goods_img"
                    ></el-image>
                  </div>
                  <div>{{ goodsInfo.goods_name }}</div>
                  <div>
                    原价:{{ goodsInfo.goods_price }}【劵后价:{{
                      goodsInfo.goods_after_price
                    }}】 包邮
                  </div>
                  <div>
                    月销量:{{ goodsInfo.month_goods_num }} 好评数:{{
                      goodsInfo.good_review_num
                    }}
                  </div>
                  <div>领卷:{{ goodsInfo.coupon_url }}</div>
                  <div>抢购:{{ goodsInfo.goods_url }}</div>
                  <div>{{ goodsInfo.goods_copywriting }}</div>
                </div>
                <el-button
                  class="join_btn22"
                  plain
                  slot="reference"
                  @mousedown.native="handleOk2('goodsinfo')"
                  @click="handleOk('goodsinfo')"
                >
                  <!-- <span class="iconimg22"></span> -->
                  <span>复制文案</span>
                </el-button>
              </el-popover>

              <!-- <el-button style="margin-left:10px" class="look_info2" plain>
                <span>复制文案</span>
              </el-button>-->
              <el-button
                class="join_btn22 collect_btn2"
                plain
                @click="doAddCollection"
              >
                <div class="disflex">
                  <!-- <span class="heart" ref="heart"></span> -->
                  <span>加入收藏</span>
                </div>
              </el-button>
            </div>
          </div>
        </div>
        <el-dialog
          title="商品评价"
          :visible.sync="evaluate"
          width="30%"
          :before-close="handleClose"
        >
          <div class="evaluate_box" v-if="evaluateClass.length > 0">
            <div class="tags_box">
              <el-tag
                type="warning"
                class="evatags"
                v-for="(item, index) in evaluateClass"
                :key="index"
                @click="evaluatetags(item.rid)"
              >{{ item.name }} ({{ item.count }})</el-tag
              >
            </div>
            <div class="evaluate_list">
              <div
                v-for="(eva, index) in evaList"
                :key="index"
                class="eva_mian"
                :style="{
                  backgroundColor: index % 2 == 0 ? '#f2f2f2' : '#f4faff'
                }"
              >
                <p>{{ eva.content }}</p>
                <div class="eva_text">
                  <div class="eva_img" v-if="eva.images">
                    <img
                      :src="img.imgUrl"
                      alt=""
                      v-for="(img, index2) in eva.images"
                      :key="index2"
                    />
                  </div>
                  <div>{{ eva.creationTime }}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-else>对不起!暂无评论.</div>
        </el-dialog>
      </el-card>
      <!-- 推广人信息及折线图 -->
      <div style="margin:20px 0;" v-loading="infoloading">
        <el-card shadow="never" :body-style="{ padding: '0px' }">
          <div class="tg_man">
            <div class="source">
              <div class="source_left">
                <div class="head_photo">
                  <img :src="goodsInfo.user_img" alt />
                </div>
                <div class="user_info">
                  <div>
                    <span class="user_name">{{ goodsInfo.nickname }}</span>
                    <span class="aect">
                      <em></em>
                      已认证
                    </span>
                  </div>
                  <div style="color: #666; fontsize:12px">
                    {{ goodsInfo.team_desc }}
                  </div>
                </div>
              </div>
              <div class="top_data2">
                <div class="data_box2">
                  <p class="data_top2">{{ goodsInfo.zx_goods_num }}</p>
                  <p class="data_bot2">在线商品</p>
                </div>
                <el-divider direction="vertical"></el-divider>
                <div class="data_box2">
                  <p class="data_top2">{{ goodsInfo.top_info[0].today_num }}</p>
                  <p class="data_bot2">今日领劵量</p>
                </div>
                <el-divider direction="vertical"></el-divider>
                <div class="data_box2">
                  <p class="data_top2">{{ goodsInfo.top_info[0].all_num }}</p>
                  <p class="data_bot2">总领劵量</p>
                </div>
              </div>
            </div>
            <div class="echart_box">
              <div class="ecartradio">
                <el-radio-group
                  v-model="echartradio"
                  size="medium"
                  @change="echartchange"
                >
                  <el-radio-button label="1">劵后价</el-radio-button>
                  <el-radio-button label="2">优惠劵面值</el-radio-button>
                  <el-radio-button label="3">佣金比例</el-radio-button>
                  <el-radio-button label="4">销量</el-radio-button>
                </el-radio-group>
              </div>
              <div
                ref="seachart"
                class="seachart"
                :style="{
                  width: '100%',
                  height: '210px'
                }"
              ></div>
              <!-- transform: 'scaleX(1.2)' -->
            </div>
          </div>
        </el-card>
      </div>
      <!-- 素材文案盒子 -->
      <el-card
        shadow="never"
        :body-style="{ padding: '0px' }"
        v-loading="infoloading"
      >
        <div class="material">
          <el-radio-group v-model="materradio" class="container_nav">
            <el-radio :label="1" class="container_li">
              <i class="iconfont icon_jd_lianjie matericon"></i>
              <em>一键转链</em>
            </el-radio>
            <el-radio :label="2" class="container_li">
              <i class="iconfont icon_jd_img matericon"></i>
              <em>社群素材</em>
            </el-radio>
            <el-radio :label="3" class="container_li">
              <i class="iconfont icon_jd_video matericon"></i>
              <em>视频推广</em>
              <!-- <i class="container_active"></i> -->
            </el-radio>
          </el-radio-group>
          <div class="container1">
            <div class="box_top">
              <div
                class="swiper_box"
                style="position:relative"
                v-if="imgsList.length > 0"
              >
                <el-checkbox-group v-model="checkList">
                  <swiper ref="mySwiper" :options="swiperOptions">
                    <swiper-slide
                      v-for="(item, index) in imgsList"
                      :key="index"
                    >
                      <el-checkbox :label="item">
                        <el-image
                          class="userimg"
                          style="width: 117px; height: 117px"
                          :src="item"
                          fit="cover"
                        ></el-image>
                      </el-checkbox>

                      <!-- <div class="team_left">
                      <el-image
                        class="userimg"
                        style="width: 117px; height: 117px"
                        :src="item"
                        fit="cover"
                      ></el-image>
                    </div> -->
                    </swiper-slide>
                  </swiper>
                </el-checkbox-group>
                <div class="swiper-button-prevs prevs1">
                  <i class="el-icon-arrow-left"></i>
                </div>
                <div class="swiper-button-nexts nexts1">
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <div class="swiper_box" v-else>
                对不起!该商品暂无评价图!
              </div>
              <el-button plain>
                <i class="el-icon-edit"></i>自定义长图
              </el-button>
            </div>
            <div class="box_main">
              <!-- 微信 -->
              <div class="wx_box">
                <div class="wx_top">
                  <div class="wxtop_left">
                    <i class="iconfont icon_jd_wx"></i>
                    <div>
                      <p
                        style="color: #333;font-size: 16px;font-weight: 700;padding-left:10px"
                      >
                        微信
                      </p>
                      <el-button
                        type="text"
                        style="color: #43b548;"
                        @click="goset"
                      >
                        <i class="iconfont icon_jd_shezhi"></i>
                        配置推广位
                      </el-button>
                    </div>
                  </div>
                  <el-button
                    plain
                    icon="el-icon-edit"
                    class="editbtn"
                    style="color:#13baf8;border: 1px solid #13baf8;"
                    @click="openedit"
                  >修改文案</el-button
                  >
                </div>
                <div class="wx_main">
                  <div class="wx_copywriting" id="wxcopy">
                    <div class="wx_imgs">
                      <img
                        :src="item"
                        v-for="(item, index) in checkList"
                        :key="index"
                        alt
                        srcset
                      />
                    </div>
                    <div contenteditable="true">
                      <p v-html="wxbottext"></p>
                      <p>
                        【下单方法】长按复制这条信息，打开手机京东，可领券并下单
                        {{ tkl_url }}
                      </p>
                    </div>
                  </div>
                </div>
                <el-button
                  type="success"
                  class="wx_btn"
                  @mousedown.native="handleOk2('wxcopy')"
                >一键转链并复制</el-button
                >
              </div>
              <!-- QQ -->
              <div
                class="wx_box"
                style="border: 1px solid #13baf8;background: #e8f5f9;"
              >
                <div class="wx_top">
                  <div class="wxtop_left">
                    <i class="iconfont icon_jd_qq"></i>
                    <div>
                      <p
                        style="color: #333;font-size: 16px;font-weight: 700;padding-left:10px"
                      >
                        QQ
                      </p>
                      <el-button
                        type="text"
                        style="color:#13baf8;"
                        @click="goset"
                      >
                        <i class="iconfont icon_jd_shezhi"></i>
                        配置推广位
                      </el-button>
                    </div>
                  </div>
                  <el-button
                    plain
                    icon="el-icon-edit"
                    class="editbtn"
                    @click="openedit"
                    style="color:#13baf8;border: 1px solid #13baf8;"
                  >修改文案</el-button
                  >
                </div>
                <div class="wx_main" style="background-color: #d7f1f8;">
                  <div class="wx_copywriting qq_copy" id="qqcopy">
                    <div class="wx_imgs">
                      <img
                        :src="item"
                        v-for="(item, index) in checkList"
                        :key="index"
                        alt
                        srcset
                      />
                    </div>
                    <div class="wx_text" contenteditable="true">
                      <p v-html="wxbottext"></p>
                      <p>
                        【下单方法】点击蓝色链接即可领券并下单
                        {{ tkl_url }}
                      </p>
                    </div>
                  </div>
                </div>
                <el-button
                  type="success"
                  class="wx_btn qq_btn"
                  @mousedown.native="handleOk2('qqcopy')"
                >一键转链并复制
                </el-button>
              </div>
              <!-- 朋友圈 -->
              <div class="wx_box" style="background:#ededed">
                <div class="wx_top">
                  <div class="wxtop_left">
                    <el-image
                      class="userimg"
                      style="width: 53px; height: 53px"
                      :src="require('@/assets/imgs/friends.png')"
                      fit="cover"
                    ></el-image>
                    <!-- <i class="iconfont icon_jd_qq"></i> -->
                    <div>
                      <p
                        style="color: #333;font-size: 16px;font-weight: 700;padding-left:10px"
                      >
                        朋友圈
                      </p>
                      <div style="font-size:12px">一键发圈</div>
                    </div>
                  </div>
                  <el-button
                    plain
                    icon="el-icon-edit"
                    class="editbtn"
                    @click="openedit"
                  >修改文案</el-button
                  >
                </div>
                <div class="wx_main" style="background-color: #e2e2e2;">
                  <div class="wx_copywriting">
                    <div class="wx_text" id="friendcopy" contenteditable="true">
                      <p v-html="wxbottext"></p>
                      ---------------------<br />
                      【下单方法】长按复制这条信息，打开手机京东，可领券并下单
                      {{ tkl_url }}
                    </div>
                    <!-- <el-button plain class="getimg">
                      点击获取
                      <br />获取实拍图
                    </el-button> -->
                  </div>
                </div>
                <el-button
                  type="success"
                  class="wx_btn"
                  @mousedown.native="handleOk2('friendcopy')"
                >一键转链并复制
                </el-button>
              </div>
              <!-- 二维码 -->
              <div
                class="wx_box"
                style="background: rgba(243,246,255,1);border: 1px solid rgba(78,119,254,1);position: relative;margin-bottom: 0px;"
              >
                <div class="wx_top">
                  <div class="wxtop_left">
                    <el-image
                      class="userimg"
                      style="width: 53px; height: 53px"
                      :src="require('@/assets/imgs/qrcode.png')"
                      fit="cover"
                    ></el-image>
                    <div>
                      <p
                        style="color: #333;font-size: 16px;font-weight: 700;padding-left:10px"
                      >
                        二维码
                      </p>
                    </div>
                  </div>
                </div>
                <div id="qrimg">
                  <div
                    class="qrcode_box"
                    id="baocanvas"
                    ref="baocanvas"
                    v-if="saveurl == ''"
                  >
                    <div class="qr_top">
                      <img :src="require('@/assets/imgs/tm.png')" alt srcset />
                      <p>{{ wxtoptext }}</p>
                    </div>
                    <div class="qr_header">
                      <div class="qr_goodsprice">
                        <div class="qr_ttop">
                          <span class="qr_t1">劵后</span>
                          <span
                            class="qr_t2"
                          >￥{{ goodsInfo.goods_after_price }}</span
                          >
                        </div>
                        <div class="qr_tbot">
                          <span class="qr_t1">原价</span>
                          <span
                            class="qr_t1"
                          >￥{{ goodsInfo.goods_price }}</span
                          >
                        </div>
                      </div>
                      <div class="qr_coupon">
                        <p>{{ goodsInfo.coupon_discount }}元劵</p>
                      </div>
                    </div>
                    <div class="qr_copy">
                      {{ copywrit }}
                      <!-- <p v-html="wxbottext"></p> -->
                    </div>
                    <img
                      :src="checkList[checkList.length - 1]"
                      class="tgimg"
                      alt
                      srcset
                    />
                    <div class="qrcodebox">
                      <img
                        class="qrcodeimg"
                        :src="require('@/assets/imgs/qrcodeimg.png')"
                        alt
                        srcset
                      />
                      <div id="qrcode" ref="qrcode"></div>
                    </div>
                  </div>
                  <img
                    v-else
                    :src="saveurl"
                    style="width:163px;height:337px"
                    alt=""
                  />
                </div>
                <el-button
                  type="success"
                  class="qr_btn"
                  @click="getChain(4)"
                >一键合成并复制</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <el-dialog
          title="编辑文案"
          :visible.sync="editdia"
          width="370px"
          :before-close="handleClose2"
        >
          <div class="editbox">
            <el-input
              id="emojiInput"
              ref="texttemplate"
              type="textarea"
              :rows="15"
              placeholder="请输入内容"
              v-model="copytext"
            >
            </el-input>
            <div id="exampleInputEmoji">
              <el-button
                style="padding: 5px;font-size:20px"
                @click="toogleDialogEmoji"
              >😃</el-button
              >
              <VEmojiPicker
                v-show="showDialog"
                labelSearch="Search"
                lang="pt-BR"
                @select="selectEmoji"
              />
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editdia = false">取 消</el-button>
            <el-button type="primary" @click="dosure">确 定</el-button>
          </span>
        </el-dialog>
      </el-card>
      <div
        class="goodsdetails_bot"
        v-if="xg_goods.length > 0"
        v-loading="infoloading"
      >
        <div class="bot_title">好单推荐</div>
        <div>
          <div class="swiper_box2" style="position:relative">
            <swiper ref="mySwiper2" :options="swiperOptions2">
              <swiper-slide
                v-for="(item, index) in xg_goods"
                :key="index"
                class="hover_box2"
              >
                <!-- style="height: 358px;" -->
                <!-- top标签 -->
                <!-- <div class="position_Box">
                  <i class="iconfont icon_top topimg2"></i>
                  <div class="top_num2">{{ index + 1 }}</div>
                </div>-->
                <el-card shadow="always" :body-style="{ padding: '0px' }">
                  <div class="top_main2">
                    <div
                      class="demo-image__lazy"
                      style="cursor: pointer;width:220px;height:220px"
                    >
                      <el-image
                        @click="godetails(item.id)"
                        class="elimg2"
                        style="width:220px;height:220px"
                        fit
                        :src="item.goods_img"
                      >
                        <!-- <div slot="placeholder" class="image-slot">
                          <Goodsloading></Goodsloading>
                        </div> -->
                      </el-image>
                    </div>
                    <div class="top_right2">
                      <div class="top_title2">
                        <a
                          :href="item.goods_url"
                          target="_blank"
                          rel="noopener noreferrer"
                        >{{ item.goods_short_name }}</a
                        >
                      </div>
                      <div class="top_data2">
                        <div>
                          <p>{{ item.goods_after_price }}</p>
                          <p style="font-size:12px">劵后价</p>
                        </div>
                        <div>
                          <p>{{ item.coupon_discount }}</p>
                          <p style="font-size:12px">优惠券</p>
                        </div>
                        <div>
                          <p>{{ item.commission_bl }}%</p>
                          <p style="font-size:12px">营销</p>
                        </div>
                      </div>
                      <!-- <el-progress
                        style="width: 90%;margin: 0 auto;"
                        :text-inside="true"
                        :stroke-width="15"
                        :percentage="
                          parseInt(
                            (
                              (item.lq_num / item.coupon_all_num) *
                              100
                            ).toFixed()
                          )
                        "
                      ></el-progress> -->
                    </div>
                  </div>
                </el-card>
              </swiper-slide>
            </swiper>
            <div class="swiper-button-prevs prevs2">
              <i class="iconfont icon_jd_left"></i>
            </div>
            <div class="swiper-button-nexts nexts2">
              <i
                class="iconfont icon_jd_left"
                style="transform: rotate(180deg);"
              ></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footerbox></footerbox>
  </div>
</template>

<script>
import footerbox from '@/components/footerbox.vue'
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import VEmojiPicker from 'v-emoji-picker'
import Goodsloading from '@/components/Goodsloading.vue'
// import botloading from "@/components/botloading.vue";
import {
  getGoodsDetail,
  getChain,
  getGoodsEvaluateList,
  getEvaluateList,
  getEvaluatePage,
  doAddCollection,
  uploadBase,
  addGoodsErr
} from '@/api/homepage'

export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime)
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      var o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          var str = o[k] + ''
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length)
          )
        }
      }
      return fmt
    }
  },
  name: 'GoodsDetails',
  components: {
    Goodsloading,
    VEmojiPicker,
    footerbox
  },
  data() {
    return {
      form: {
        goods_id: '', //商品id
        type: '1', //纠错类型
        desc: '', //纠错描述
        img: '' //纠错证明
      },
      options: [
        {
          value: '1',
          label: '价格不对/优惠券异常'
        },
        {
          value: '2',
          label: '佣金不对/计划取消'
        },
        {
          value: '3',
          label: '商品劣质/不发货/虚假'
        },
        {
          value: '4',
          label: '其他异常'
        },
        {
          value: '5',
          label: '榜单纠错'
        }
      ],
      errorshow: false,
      infoloading: false,
      copywrit: '',
      goodsurl: '',
      qrurl: '',
      checkList: [],
      copytext: '',
      editdia: false,
      showDialog: false,
      tkl_url: '#请先转链#',
      evaluateradio: '',
      evaluateClass: [],
      evaList: [],
      evaluate: false,
      xg_goods: [],
      wxtoptext: '',
      wxbottext: '',
      wximgList: [''],
      tgimg: '',
      imgsList: [
        // {
        //   id: 15,
        //   goods_img:
        //     "http://img.haodanku.com/1593608048_2a0e44f4ebaa20bc3131c3d6d7a1300d",
        //   user_id: 1
        // }
      ],
      swiperOptions: {
        observer: true,
        observeParents: true,
        slidesPerView: 7,
        navigation: {
          nextEl: '.nexts1',
          prevEl: '.prevs1'
        }
      },
      swiperOptions2: {
        observer: true,
        observeParents: true,
        slidesPerView: 5,
        navigation: {
          nextEl: '.nexts2',
          prevEl: '.prevs2'
        }
      },
      materradio: 1, //文案
      echartradio: '1', //图表
      goodsInfo: {
        id: 0, // 商品自增id
        goods_img: '', //商品图片
        brand_name: '', // 品牌名称
        goods_short_name: '', // 短名称
        goods_copywriting: '', // 商品文案
        goods_after_price: '', // 卷后价
        goods_price: '', //商品原价
        coupon_discount: '', //面值
        //优惠卷链接
        coupon_url: '',
        coupon_surplus_num: 0, //优惠卷剩余数量
        coupon_end_time: 0, //优惠卷结束时间
        commission_bl: '', //佣金比例
        month_goods_num: 0, //月销量
        goods_today_xl: 0, //今日两小时销量
        today_coupon_num: 0, //今日销量
        good_review_num: '0', //好评数
        good_review: '0', //好评率
        goods_xj_img: '', //商品细节图
        shop_name: '', //商铺名称
        experience: '', //综合体验
        logistics: '', //物流履约得分
        after_service: '', //售后服务
        user_pj: '', //用户评价
        nickname: '', //昵称
        user_img: '', //用户头像
        user_type: 1, //用户类型账号类型 1=京粉用户 2 招商用户 3 京东商户4审核用户
        user_id: 1, //用户id
        item_id: '', //商品id
        top_info: [
          //上单人员数据
          {
            today_num: '0', //今日领卷数量
            all_num: '0' //共领卷数量
          }
        ],
        zx_goods_num: 0, //在线商品数
        top_new_goods: [
          //上单最新的商品
          {
            id: 0,
            goods_img: '',
            user_id: 1
          }
        ],
        xg_goods: [
          //相关商品
          {
            id: 0, //自增id
            goods_img: '', //图片
            goods_short_name: '', //短名称
            coupon_all_num: 1, //优惠卷总量
            lq_num: 0, //领取数量
            goods_after_price: '0', //卷后价
            commission_bl: '0', //佣金比例
            coupon_discount: '0', //面值
            month_goods_num: 0, //月销量
            goods_type: 1 //1=京东自营 2=拼购 3 pop
          }
        ],
        history: [
          //历史数据商品
          {
            after_price: '0', //卷后价
            coupon_discount: '0', //面值
            commission_bl: '0', //佣金比例
            num: 0 //今日销量
          }
        ]
      },
      user_id: '',
      goods_id: '',
      //折线图
      seasetoption: {
        tooltip: {
          show: true,
          trigger: 'axis', //竖线
          axisPointer: {
            type: 'cross' //横线
          }
        },
        grid: {
          //距离上下左右的距离
          top: '9%',
          left: '3%',
          right: '4%',
          bottom: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: [],
            type: 'line'
          }
        ]
      },
      saveurl: '',
      urlStre:'',
      errorList:[]
    }
  },

  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper
    },
    swiper2() {
      return this.$refs.mySwiper2.$swiper
    }
  },
  created() {
    this.goods_id = this.$route.query.id
    if (this.$ls.get('userinfo')) {
      this.user_id = this.$ls.get('userinfo').id
    }
  },
  mounted() {
    this.getGoodsDetail(this.goods_id)
    this.$nextTick(() => {
      this.qrcode()
    })
  },
  methods: {
    doerror(){

    },
        beforeAvatarUpload(file) {
      console.log(file.type)
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG,PNG格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
     dosumbit() {
      this.form.goods_id = parseInt(this.goods_id)
      console.log(this.form)
      //新增纠错
      addGoodsErr({
        ...this.form
      })
        .then(res => {
          if (res.code == 200) {
            console.log('纠错返回', res)
            this.$message.success('纠错成功!')
            this.form = this.$options.data().form
            this.errorList=[]
            this.errorshow = false
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 纠错
    handleAvatarSuccess2(res, file, fileList) {
      console.log('纠错图', res, file.raw)
      console.log('返回fileList', fileList)
      this.urlStre = ''
      if (fileList.length > 0) {
        this.errorList = []
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          if (fileList[i].response !== '') {
            this.urlStre += fileList[i].response.data.url + ','
            this.errorList.push('http://' + fileList[i].response.data.url)
          }
        }
      }
      this.urlStre = this.urlStre.substring(0, this.urlStre.length - 1)
      this.form.img = this.urlStre
      // console.log('纠错字符串', this.urlStre)
      // console.log('纠错列表', this.errorList)
    },
    handleRemove2(file, fileList) {
      // console.log('纠错', file)
      // console.log('纠错List', fileList)
      this.urlStre = ''
      if (fileList.length > 0) {
        for (var i = 0; i < fileList.length; i++) {
          // this.ruleForm.relevant_img;
          this.urlStre += fileList[i].response.data.url + ','
        }
      }
      this.urlStre = this.urlStre.substring(0, this.urlStre.length - 1)
      // console.log('纠错urlStre', this.urlStre) 
    },
    // 合成为图片
    saveAsImg(val) {
      const loading = this.$loading({
        lock: true,
        text: '合成中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      // 先获取你要转换为img的dom节点
      var node = document.getElementById(val)
      // console.log("node", node);
      var width = 158 //dom宽
      var height = 300 //dom高
      // var width = node.offsetWidth; //dom宽
      // var height = node.offsetHeight; //dom高
      var scale = 3 //放大倍数
      //   crossOrigin='Anonymous' //服务器路径要给图片dom设置该属性 !!!
      html2canvas(node, {
        width: width,
        heigth: height,
        backgroundColor: '#ffffff', //背景是否透明 为null 透明
        dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
        scale: scale,
        X: 0,
        Y: 0,
        scrollX: -3, //如果左边多个白边 设置该偏移
        scrollY: 0,
        useCORS: true, //是否使用CORS从服务器加载图像 !!!
        allowTaint: true //是否允许跨域图像污染画布  !!!
      }).then(canvas => {
        // console.log("canvas", canvas);
        var url = canvas.toDataURL() //这里上面不设值cors会报错

        // var a = document.createElement("a");
        // a.download = "营销图"; //设置图片名称
        // var event = new MouseEvent("click");
        // a.href = url;
        // console.log("a", a);
        // a.dispatchEvent(event); //触发a的单击事件

        // this.dourl = url;
        // console.log("url", url);
        uploadBase({
          file: url
        })
          .then(res => {
            if (res.code == 200) {
              loading.close()
              // console.log('base上传返回', res.data.url)
              this.saveurl = 'http://' + res.data.url
              this.$message.success('合成成功!')
              this.handleOk('qrimg')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      })
    },
    qrcode() {
      var qrcode = new QRCode('qrcode', {
        width: 200, // 设置宽度，单位像素
        height: 200, // 设置高度，单位像素
        text: this.qrurl // 设置二维码内容或跳转地址
      })
      // console.log(qrcode)
      return qrcode
    },
    //收藏
    doAddCollection() {
      doAddCollection({
        collection_id: this.goods_id
      })
        .then(res => {
          if (res.code == 200) {
            // console.log("收藏返回", res);
            this.$message.success('收藏成功!')
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    openedit() {
      // console.log('0', this.wxbottext)
      var Content = this.wxbottext
      Content = Content.replaceAll('<br/>', '\n')
      this.copytext = Content
      // console.log(Content);
      this.editdia = true
    },
    dosure() {
      // console.log('1', this.copytext)
      var Content = JSON.stringify(this.copytext)
      Content = Content.replaceAll(/"/g, '')
      Content = Content.replace(/\\n/g, '<br/>')
      this.wxbottext = Content
      this.editdia = false
    },
    handleClose2() {
      this.editdia = false
      this.copytext = ''
    },
    // 表情
    selectEmoji(emoji) {
      var elInput = document.getElementById('emojiInput')
      // console.log(elInput);
      //根据id选择器选中对象
      var startPos = elInput.selectionStart // input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd // 选中的字符到最后的字符
      // console.log(startPos, " --- ", endPos);
      if (startPos === undefined || endPos === undefined) return
      var txt = elInput.value
      // 将表情添加到选中的光标位置
      var result =
        txt.substring(0, startPos) + emoji.data + txt.substring(endPos)
      elInput.value = result // 赋值给input的value
      // 重新定义光标位置
      elInput.focus()
      elInput.selectionStart = startPos + emoji.data.length
      elInput.selectionEnd = startPos + emoji.data.length
      this.copytext = result // 赋值
    },
    toogleDialogEmoji() {
      this.showDialog = !this.showDialog
    },
    goset() {
      const routes = this.$router.resolve({
        path: '/content/set'
      })
      // query: { id: 1 }
      window.open(routes.href, '_blank')
    },
    //评价图
    getEvaluatePage() {
      getEvaluatePage({
        page: 0,
        goods_id: this.goodsInfo.item_id
      })
        .then(res => {
          if (res.code == 200) {
            // console.log('商品评价图返回', res)
            this.imgsList = res.data.data
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    evaluatetags(val) {
      // console.log('tagsrid', val)
      this.getEvaluateList(val)
    },
    getEvaluateList(id) {
      getEvaluateList({
        goods_id: this.goodsInfo.item_id,
        rid: id,
        page: 1,
        pagesize: 999
      })
        .then(res => {
          // console.log("评论2", res);
          this.evaList = res.data.comments
        })
        .catch(err => {
          console.log(err)
        })
    },
    getGoodsEvaluateList() {
      getGoodsEvaluateList({
        goods_id: this.goodsInfo.item_id,
        page: 1,
        pagesize: 999
      })
        .then(res => {
          // console.log("评价1", res);
          this.evaluateClass = res.data.hotCommentTagStatistics
          this.evaList = res.data.comments
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleClose() {
      this.evaluate = false
    },
    openevaluate() {
      this.evaluate = true
    },
    //获取转链
    getChain(val) {
      if (this.$ls.get('userinfo')) {
        if (this.$ls.get('userinfo').jd_id && this.$ls.get('userinfo').tgw_id) {
          getChain({
            goods_id: this.goods_id
          })
            .then(res => {
              if (res.code == 200) {
                // console.log('转链返回', res)
                this.tkl_url = res.data.url
                this.qrurl = res.data.url
                var Content = this.wxbottext
                // Content = Content.replaceAll(/"/g, "");
                Content = Content.replace(/#请先转链?#/g, this.tkl_url)
                Content = Content.replace(/一键转链并复制/g, '')
                this.wxbottext = Content
                if (val === 1) {
                  this.handleOk('wxcopy')
                }
                if (val == 2) {
                  this.handleOk('qqcopy')
                }
                if (val == 3) {
                  this.handleOk('friendcopy')
                }
                if (val == 4) {
                  this.$nextTick(() => {
                    this.qrcode()
                  })
                  if (this.qrurl !== '') {
                    setTimeout(() => {
                      this.saveAsImg('baocanvas')
                    }, 500)
                  }
                }
              } else {
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.$confirm('请先配置京东id和推广位id再试, 点击前往配置?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              const routes = this.$router.resolve({
                path: '/content/set'
              })
              // query: { id: 1 }
              window.open(routes.href, '_blank')
            })
            .catch(() => {})
        }
      } else {
        this.$message.info('请先登录!')
        this.$router.push({
          path: '/login',
          query: { active: 'login', redirect: this.$route.fullPath }
        })
      }
    },

    // 图表变更
    echartchange(val) {
      // console.log('echartradio', val)
      if (val == 1) {
        // this.seasetoption.xAxis.data = this.getArrayProps(
        //   this.goodsInfo.history,
        //   "create_at"
        // );
        this.seasetoption.series[0].data = this.getArrayProps(
          this.goodsInfo.history,
          'after_price'
        )
        // console.log(
        //   "数据y轴",
        //   this.getArrayProps(this.goodsInfo.history, "coupon_discount")
        // );
        this.getSeachart()
      }
      if (val == 2) {
        // this.seasetoption.xAxis.data = this.getArrayProps(
        //   this.goodsInfo.history,
        //   "create_at"
        // );
        this.seasetoption.series[0].data = this.getArrayProps(
          this.goodsInfo.history,
          'coupon_discount'
        )
        // console.log(
        //   "数据y轴",
        //   this.getArrayProps(this.goodsInfo.history, "coupon_discount")
        // );
        this.getSeachart()
      }
      if (val == 3) {
        // this.seasetoption.xAxis.data = this.getArrayProps(
        //   this.goodsInfo.history,
        //   "create_at"
        // );
        this.seasetoption.series[0].data = this.getArrayProps(
          this.goodsInfo.history,
          'commission_bl'
        )
        // console.log(
        //   "数据y轴",
        //   this.getArrayProps(this.goodsInfo.history, "coupon_discount")
        // );
        this.getSeachart()
      }
      if (val == 4) {
        // this.seasetoption.xAxis.data = this.getArrayProps(
        //   this.goodsInfo.history,
        //   "create_at"
        // );
        this.seasetoption.series[0].data = this.getArrayProps(
          this.goodsInfo.history,
          'num'
        )
        // console.log(
        //   "数据y轴",
        //   this.getArrayProps(this.goodsInfo.history, "coupon_discount")
        // );
        this.getSeachart()
      }
    },
    getSeachart() {
      // 基于准备好的dom，初始化echarts实例
      const seachart = this.$echarts.init(this.$refs.seachart)
      // 清空
      seachart.clear()
      // 绘制图表
      seachart.setOption(this.seasetoption)
      // console.log(seachart);
    },
    // 数组提取key值
    getArrayProps(array, key) {
      var resc = []
      if (array) {
        array.forEach(function(t) {
          resc.push(t[key])
        })
      }
      //使用: this.getArrayProps(array, "key")  返回一个数组值为array里key['key','key'];
      return resc
    },
    handleOk2(val) {
      // console.log(val);
      if (val == 'wxcopy') {
        this.getChain(1)
      }
      if (val == 'qqcopy') {
        this.getChain(2)
      }
      if (val == 'friendcopy') {
        this.getChain(3)
      }
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection()
        const range = document.createRange()
        // console.log(document.getElementById(val));
        range.selectNode(document.getElementById(val)) //传入dom
        selection.addRange(range)
        document.execCommand('copy')
        selection.removeAllRanges()
      })
    },
    handleOk(val) {
      // console.log(val)
      this.$nextTick(function() {
        //nextTick,当前dom渲染完毕的回调
        const selection = window.getSelection()
        const range = document.createRange()
        // console.log(document.getElementById(val))
        range.selectNode(document.getElementById(val)) //传入dom
        selection.addRange(range)
        document.execCommand('copy')
        this.$message.success('复制成功')
        selection.removeAllRanges()
      })
    },
    godetails(id) {
      // console.log(id)
      const routes = this.$router.resolve({
        path: '/jdselectgoods/goodsdetails',
        query: {
          id: id
        }
      })
      window.open(routes.href, '_blank')
    },
    getGoodsDetail(id) {
      // console.log('id', id)
      this.infoloading = true
      getGoodsDetail({
        goods_id: id
        // goods_id: "55835"
      })
        .then(res => {
          // console.log('商品详情', res.data)
          this.goodsurl = res.data.goods_url
          this.goodsInfo = res.data
          this.checkList.push(res.data.goods_img)
          this.tgimg = res.data.goods_img
          this.copywrit = res.data.goods_copywriting
          var str = ''
          str += '【商品短标题】' + res.data.goods_short_name + '<br/>'
          str += '---------------------' + '<br/>'
          str += '【京东价】' + this.goodsInfo.goods_price + '元' + '<br/>'
          str +=
            '【抢购价】' + this.goodsInfo.goods_after_price + '元' + '<br/>'
          str += '【抢购】' + this.tkl_url + '<br/>'
          str += '---------------------' + '<br/>'
          str += res.data.goods_copywriting
          // str += "---------------------" + "<br/>";
          this.wxbottext = str
          // console.log("this.xg_goods", this.xg_goods);
          this.wxtoptext = res.data.goods_short_name
          this.xg_goods = this.goodsInfo.xg_goods
          // this.imgsList = this.goodsInfo.top_new_goods;
          this.seasetoption.xAxis.data = this.getArrayProps(
            res.data.history,
            'create_at'
          )
          // console.log(
          //   "时间x轴",
          //   this.getArrayProps(res.data.history, "create_at")
          // );
          this.seasetoption.series[0].data = this.getArrayProps(
            res.data.history,
            'after_price'
          )
          // console.log(
          //   "数据y轴",
          //   this.getArrayProps(res.data.history, "coupon_discount")
          // );
          this.infoloading = false
          this.getGoodsEvaluateList()
          this.getEvaluatePage()
          this.getSeachart()
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less">
.popover2 {
  margin-top: -5px !important;
  border: none;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  box-shadow: none;

  .popper__arrow {
    display: none;
  }
}

.popover {
  // .el-popover {
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 12px;

  // }
  .popper__arrow::after {
    border-right-color: rgba(0, 0, 0, 0.5) !important;
  }
}
</style>
<style lang="less" scoped>
.position_hover {
  // position: absolute;
  // top: -100px;
  // left: 225px;
  border-radius: 12px;
  box-sizing: border-box;
  padding: 10px;
  color: white;
  // background-color: #00000075;
  // display: none;
  // width: 300px;
  text-align: left;
  // word-break: keep-all;
  // white-space: nowrap;
  font-size: 12px;

  .elimghover {
    width: 80px;
  }
}

.shops_info22 {
  font-size: 12px;
}

p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.disflex {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 10px;
  text-align: left;

  .childone {
    display: inline-block;
    width: 150px !important;
  }

  .childtwo {
    text-align: right;
    white-space: nowrap;
  }
}

.goodsDetails {
  padding-top: 20px;
  width: 100%;

  .goodsdeta_main {
    width: 1280px;
    margin: 0 auto;

    /deep/.el-card {
      border: none;
      border-radius: 10px;
    }

    .show_Box {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;

      .error_box {
        cursor: pointer;
        position: absolute;
        top: -20px;
        right: -15px;
        color: #ff8e7f;
      }

      .showgoods::v-deep {
        // width: 600px;
        // width: 40%;
        border-radius: 12px;
      }

      .goods_right {
        width: 65%;
        padding: 20px;
        text-align: left;
        padding-top: 0;
        padding-bottom: 0;

        .goods_title {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title_left {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .brand_box {
              color: #fff;
              text-align: center;
              padding: 1px 5px;
              border-radius: 3px;
              background: linear-gradient(135deg, #ffa482, #ff4704);
            }
            a {
              color: rgb(0, 0, 0);
              text-decoration: none;
              background-color: transparent;
              outline: none !important;
              font-weight: bold;
              font-size: 18px;
              .shortname {
                font-weight: bold;
                font-size: 20px;
                font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei',
                  sans-serif, Arial, '宋体';
                font-style: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 500px;
              }
            }
          }
          .tagshop {
            font-size: 10px;
            color: #fff;
            padding: 1px 4px;
            background-color: rgb(229, 70, 90);
          }
          .error_box {
            font-size: 10px;
            color: gray;
            /deep/.el-icon-warning {
              color: orange;
            }
          }

          .pop {
            display: inline-block;
            font-size: 12px;
            width: 70px;
            height: 19px;
            color: white;
            text-align: center;
            border-radius: 10px;
            border-bottom-left-radius: 0;
            background: linear-gradient(
              135deg,
              rgba(255, 100, 68, 1),
              rgba(255, 150, 48, 1)
            );
          }
        }

        .goods_info {
          color: #4d76fe;
          height: 42px;
          // line-height: 42px;
          // box-sizing: border-box;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          padding: 6px;
        }

        .juan_Box {
          position: relative;
          background-color: #fafbfc;
          border-radius: 10px;

          .juannum {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            height: 53px;
            margin-top: 10px;
            text-align: center;
            line-height: 54px;
            font-size: 18px;
            color: white;
            // background: url("~@/assets/images/th_blue.png") no-repeat center;
            background-position: 100%;

            .geted {
              width: 200px;
              height: 48px;
              //   background: url("~@/assets/images/th_orange.png") no-repeat center;
              background-position: 100%;
            }
          }

          .top_data {
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;

            p {
              margin: 0;
            }

            .data_box {
              padding-top: 33px;
              padding-bottom: 33px;

              .data_top {
                font-size: 28px;
                color: #ff4215;
                font-weight: bold;
                box-sizing: border-box;

                .round_btn {
                  padding: 4px 10px !important;
                  text-align: center;
                  line-height: 10px;
                  color: white;
                  background: linear-gradient(
                    90deg,
                    rgba(91, 163, 255, 1),
                    rgba(109, 112, 255, 1)
                  );
                }
              }

              .data_main {
                color: #999;
                font-size: 14px;
                line-height: 1.2;
                padding: 10px 0px;
              }

              .data_bot {
                font-size: 14px;
                color: #333;
                margin-top: 5px;
                font-weight: 700;
              }
            }
          }

          .goods_evaluate {
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding-bottom: 15px;

            .round_btn {
              padding: 4px 10px !important;
              text-align: center;
              line-height: 10px;
              color: white;
              font-weight: bold;
              background: linear-gradient(
                90deg,
                rgba(91, 163, 255, 1),
                rgba(109, 112, 255, 1)
              );
            }
          }
        }

        .shops_box {
          height: 55px;
          background-color: #fafbfc;
          padding: 0 10px;
          margin: 10px 0px;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .shops_left {
            width: 22%;
            margin-right: 20px;
            margin-bottom: 5px;
            font-size: 16px;
            font-weight: bold;
          }

          .shops_right {
            width: 75%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;

            .item_evaluate {
              line-height: 20px;
              font-size: 14px;
              font-family: 'DIN-Medium';

              span {
                color: #ff4215;
              }

              .titem_itle {
                color: hsl(0, 0%, 40%);
                padding-bottom: 10px;
                font-weight: 700;
              }
            }
          }
        }

        .btns {
          padding-top: 6px;
          position: relative;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          // .position_hover::v-deep {
          // }
          .join_btn22 {
            display: inline-block;
            width: 150px;
            height: 50px;
            background: linear-gradient(
              90deg,
              rgba(86, 151, 253, 1) 0,
              rgba(77, 117, 254, 1) 100%
            );
            opacity: 1;
            border-radius: 5px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            cursor: pointer;
            margin-right: 15px;
            transition: all 300ms ease;
            border: 0px;
          }

          .join_btn22:hover {
            transform: translateY(-5px);
            box-sizing: border-box;
            // border: 1px solid blue;
          }

          .collect_btn2 {
            background: linear-gradient(
              90deg,
              rgba(255, 112, 33, 1) 0,
              rgba(255, 71, 39, 1) 100%
            );
            transition: all 300ms ease;
          }

          .collect_btn2:hover {
            transform: translateY(-5px);
            box-sizing: border-box;
            border: 1px solid #ff4215;
          }
        }
      }
    }

    .evaluate_box {
      .tags_box {
        padding-bottom: 10px;

        .evatags {
          margin: 5px;
          cursor: pointer;
          color: orangered;
        }
      }

      .evaluate_list {
        width: 100%;
        height: 500px;
        overflow-y: auto;

        .eva_mian {
          width: 100%;
          // height: 150px;
          box-sizing: border-box;
          padding: 10px 5px;
          border-radius: 8px;

          p {
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .eva_text {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;

            .eva_img {
              img {
                padding: 5px;
              }
            }
          }
        }
      }
    }

    .tg_man {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .source {
        width: 480px;
        text-align: center;
        box-sizing: border-box;

        .source_left {
          width: 100%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          text-align: center;
          padding: 25px;

          .head_photo {
            width: 95px;
            height: 95px;
            // overflow: hidden;
            border: 1px solid rgb(247, 247, 247);
            border-radius: 50%;
            margin-right: 10px;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .user_info {
            text-align: left;

            .user_name {
              font-weight: 700;
              font-size: 20px;
              color: #333;
              max-width: 134px;
            }

            .aect {
              min-width: 70px;
              height: 20px;
              line-height: 20px;

              background: linear-gradient(
                129deg,
                rgba(64, 236, 152, 1) 0,
                rgba(32, 226, 124, 1) 100%
              );
              border-radius: 10px;
              text-align: center;
              color: #fff;
              margin-left: 6px;
              position: relative;
              padding: 0 7px;

              em {
                display: inline-block;
                vertical-align: middle;
                width: 11px;
                height: 6px;
                background: 0 0;
                border: 2px solid #fff;
                border-top: none;
                border-right: none;
                -webkit-transform: rotate(-50deg);
                transform: rotate(-50deg);
                margin-right: 4px;
                margin-top: -3px;
              }
            }

            .aect:hover {
              .aect_img {
                animation: landr 0.8s ease-in-out;
              }
            }

            .team {
              color: #fff;
              font-size: 12px;
              font-weight: bold;
              -moz-border-radius: 0 24px 24px 24px;
              -webkit-border-radius: 0 24px 24px 24px;
              border-radius: 0 24px 24px 24px;
              line-height: 24px;
              padding: 0 15px 0 8px;
              display: inline-block !important;
              vertical-align: middle;
              -moz-border-radius: 0 24px 24px 24px;
              -webkit-border-radius: 0 24px 24px 24px;
              border-radius: 0 24px 24px 24px;
              line-height: 24px;
              padding: 0 15px 0 8px;
              background: linear-gradient(
                90deg,
                rgba(94, 103, 177, 1),
                rgba(77, 87, 167, 1)
              );

              .team_img {
                //   background: url("~@/assets/images/icon_s.png") no-repeat;
                width: 20px;
                height: 20px;
                background-position: 0 -120px;
                display: inline-block;
                vertical-align: middle;
                font-size: 0;
                overflow: hidden;
                background-repeat: no-repeat;
              }
            }

            .team:hover {
              .team_img {
                animation: landr 0.8s ease-in-out;
              }
            }
          }
        }

        .source_left:hover {
          background: #f2f2f2;
        }

        .top_data2 {
          width: 100%;
          // height: 70px;
          font-size: 13px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 36px 0 36px 0;

          p {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
          }

          .data_box2 {
            .data_top2 {
              font-size: 24px;
              color: blue;
              font-weight: bold;
              box-sizing: border-box;
            }

            .data_bot2 {
              font-size: 14px;
              color: #333;
              margin-top: 5px;
            }
          }
        }
      }

      .echart_box {
        width: 800px;
        height: 250px;

        .ecartradio::v-deep {
          margin-top: 15px;

          .el-radio-group {
            width: 92%;
            margin: 0 auto;

            .el-radio-button__inner {
              padding: 10px 66px;
            }

            .is-active {
              .el-radio-button__inner {
                color: #000;
                border-left: none;
                box-shadow: -1px 0 0 0 rgba(77, 117, 255, 0.1);
                background: rgba(77, 117, 255, 0.1);
                border-color: rgba(77, 117, 255, 0.1);
              }
            }
          }
        }
      }
    }

    .material::v-deep {
      width: 1280px;

      .container_nav {
        position: relative;
        display: flex;
        width: 610px;
        margin: 15px auto 0;
        border-radius: 40px;
        background: rgba(248, 249, 255, 1);
        border: 1px solid rgba(203, 215, 255, 1);

        .el-radio__inner {
          display: none;
        }

        .container_li {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;
          flex: 1;
          color: #333;
          cursor: pointer;
          position: relative;
          z-index: 10;
          transition: all 0.3s ease 0s;

          .matericon {
            color: blue;
            margin-right: 5px;
          }

          em {
            font-weight: 400;
            font-style: normal;
          }
        }

        .is-checked {
          box-shadow: 0px 3px 6px rgba(77, 117, 255, 0.3);
          opacity: 1;
          border-radius: 40px;
          background: linear-gradient(
            90deg,
            rgba(86, 150, 253, 1) 0%,
            rgba(77, 117, 254, 1) 100%
          );
          transition: all 0.3s ease 0s;

          .el-radio__label {
            color: white;

            .matericon {
              color: white;
            }
          }
        }
      }

      .container1 {
        .box_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-radius: 10px;
          background-color: #fafafa;
          border: 1px solid #e8e8e8;
          margin: 15px;

          .swiper_box {
            margin: 10px 25px;
            width: 980px;
            /deep/.el-checkbox__input {
              display: none;
            }
            /deep/.el-checkbox {
              border: 1px solid transparent;
            }
            /deep/.el-checkbox__label {
              padding-left: 0px;
              line-height: 0;
            }
            /deep/.is-checked {
              border: 1px solid #000;
              border-radius: 5px;
              overflow: hidden;
            }
            .swiper-container {
              padding: 5px;
            }

            .swiper-button-prevs {
              position: absolute;
              top: 50px;
              left: -20px;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 20px;
              height: 35px;
              box-sizing: border-box;
              z-index: 2;
              cursor: pointer;
              color: blue;
              font-size: 18px;

              .el-icon-arrow-left {
                font-weight: 600;
              }
            }

            .swiper-button-nexts {
              position: absolute;
              top: 50px;
              right: -20px;
              display: flex;
              align-items: center;
              justify-content: center;
              width: 20px;
              height: 35px;
              box-sizing: border-box;
              z-index: 2;
              cursor: pointer;
              color: blue;
              font-size: 18px;

              .el-icon-arrow-right {
                font-weight: 600;
              }
            }

            .swiper-button-prevs:focus {
              outline: black;
            }

            .swiper-button-nexts:focus {
              outline: black;
            }

            .swiper-button-prevs::after {
              content: '';
            }

            .swiper-button-nexts::after {
              content: '';
            }
          }

          .el-button {
            padding: 48px 30px;
            margin: 10px 20px;
            font-size: 20px;
          }
        }

        .box_main {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 15px;

          .wx_box {
            width: 302px;
            height: 460px;
            border-radius: 5px;
            background: #ecf6e9;
            border: 1px solid #43b548;
            box-sizing: border-box;
            padding: 10px;

            .wx_top {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;

              .wxtop_left {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                text-align: left;

                .icon_jd_wx {
                  font-size: 49px;
                  color: #43b548;
                }

                .icon_jd_qq {
                  font-size: 49px;
                  color: #13baf8;
                }

                /deep/ .el-button {
                  padding: 0 20px 0 10px;
                }
              }

              /deep/ .editbtn {
                text-align: center;
                border: 1px solid #43b548;
                color: #43b548;
                border-radius: 20px;
                padding: 7px 5px;
                font-size: 12px;
                font-weight: bold;
              }
            }

            .wx_main {
              width: 272px;
              height: 321px;
              background: #e2efde;
              border-radius: 30px 30px 4px 4px;
              margin: 0 auto;
              overflow: hidden;

              .wx_copywriting {
                padding: 0 16px 0 16px;
                height: 294px;
                overflow: auto;
                color: #666;
                margin-top: 20px;
                text-align: left;

                .wx_imgs {
                  img {
                    max-width: 125px;
                    height: 125px;
                    margin: 0 auto 8px;
                    cursor: pointer;
                    border: 1px solid #ededed;
                    border-radius: 5px;
                  }
                }

                .wx_text {
                  font-size: 14px;
                  margin-top: 18px;
                  color: #333;
                  overflow: hidden;
                }

                /deep/.getimg {
                  width: 96px;
                  background: rgba(247, 247, 247, 1);
                  border-radius: 5px;
                  color: #43b548;
                  font-weight: 500;
                  text-align: center;
                  padding: 29px 0;
                  margin-top: 20px;
                  cursor: pointer;
                  border: none;
                }

                /deep/.getimg:hover {
                  background: #e2efde;
                }
              }

              .wx_copywriting::-webkit-scrollbar-thumb {
                background: rgba(67, 181, 72, 0.5);
              }

              .qq_copy::-webkit-scrollbar-thumb {
                background: rgba(19, 186, 248, 0.5);
              }
            }
            /deep/.wx_btn {
              width: 240px;
              height: 45px;
              color: #fff;
              // line-height: 45px;
              text-align: center;
              font-size: 12px;
              font-weight: 700;
              background: #43b548;
              border-radius: 3px;
              margin: 0 auto;
              cursor: pointer;
              margin-top: 9px;
              transition: all 0.2s ease-in-out;
            }

            /deep/.wx_btn:hover {
              background: #309c34;
            }

            /deep/.qq_btn {
              border: none;
              background: #13baf8;
            }

            /deep/.qq_btn:hover {
              background-color: #0eaae4;
            }
            .qrcode_box {
              width: 326px;
              // height: ;
              position: absolute;
              top: -103px;
              left: -10px;
              background-color: #fff;
              border-radius: 5px;
              box-sizing: border-box;
              padding: 10px;
              font-size: 14px;
              transform: scale(0.5);
              .qr_top {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                // img {
                // }
                p {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }

              .qr_header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0;

                .qr_goodsprice {
                  .qr_t1 {
                    font-size: 10px;
                  }

                  .qr_t2 {
                    font-size: 17px;
                  }

                  .qr_ttop {
                    color: red;
                  }

                  .qr_tbot {
                    color: gray;
                  }
                }

                .qr_coupon {
                  padding: 10px;
                  background: url('~@/assets/imgs/couponbg.png') no-repeat
                    center;
                  background-size: 100%;

                  p {
                    color: white;
                    font-weight: bold;
                  }
                }
              }

              .qr_copy {
                width: 286px;
                height: 75px;
                margin: 10px;
                // background-color: #f5f5f5;
                // border-radius: 5px;
                // text-align: left;
                overflow: hidden;
                // text-overflow: ellipsis;
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 4;
              }

              .tgimg {
                width: 306px;
                height: 400px;
              }
              .qrcodebox {
                position: relative;
                .qrcodeimg {
                  width: 306px;
                  margin-top: -40px;
                }
                #qrcode {
                  width: 88px;
                  position: absolute;
                  top: -224px;
                  right: 16px;
                  z-index: 999;
                  img {
                    width: 88px;
                  }
                }
              }
            }

            /deep/.qr_btn {
              position: absolute;
              bottom: 10px;
              left: 32px;
              width: 240px;
              height: 45px;
              color: #fff;
              // line-height: 45px;
              text-align: center;
              font-size: 12px;
              font-weight: 700;
              background: #43b548;
              border-radius: 3px;
              margin: 0 auto;
              cursor: pointer;
              margin-top: 9px;
              transition: all 0.2s ease-in-out;
            }
          }
        }
      }
    }

    .editbox {
      position: relative;

      #exampleInputEmoji {
        position: absolute;
        bottom: 0;
        right: 0;

        #EmojiPicker {
          position: absolute;
          top: -252px;
          left: 50px;

          /deep/#InputSearch {
            display: none;
          }
        }
      }
    }

    .goodsdetails_bot {
      .bot_title {
        padding: 20px 0;
        font-size: 20px;
      }

      .swiper_box2 {
        position: relative;
        width: 1200px;
        margin: 0 auto;

        .icon_jd_left {
          font-size: 30px;
        }

        .swiper-button-prevs {
          position: absolute;
          top: 154px;
          left: -40px;
          display: flex;
          align-items: center;
          justify-content: center;
          // width: 20px;
          // height: 35px;
          box-sizing: border-box;
          z-index: 2;
          cursor: pointer;
          color: blue;
          font-size: 18px;

          .el-icon-arrow-left {
            font-weight: 600;
          }
        }

        .swiper-button-nexts {
          position: absolute;
          top: 154px;
          right: -40px;
          display: flex;
          align-items: center;
          justify-content: center;
          // width: 20px;
          // height: 35px;
          box-sizing: border-box;
          z-index: 2;
          cursor: pointer;
          color: blue;
          font-size: 18px;

          .el-icon-arrow-right {
            font-weight: 600;
          }
        }

        .swiper-button-prevs:focus {
          outline: black;
        }

        .swiper-button-nexts:focus {
          outline: black;
        }

        .swiper-button-prevs::after {
          content: '';
        }

        .swiper-button-nexts::after {
          content: '';
        }

        .hover_box2 {
          position: relative;
          width: 254px;
          // height: 358px;
          border-radius: 12px;
          margin-bottom: 20px;
          display: flex;
          display: -webkit-flex;
          flex-direction: row;
          flex-wrap: wrap;
          transition: all 300ms ease;
          z-index: 0;

          .position_Box {
            display: flex;
            flex-wrap: wrap;
            width: 62px;
            justify-content: flex-start;
            position: absolute;
            z-index: 2;

            .saleimg {
              width: 60px;
              height: 40px;
            }

            .allnum {
              //       position: absolute;
              // top: 40px;
              min-width: 60px;
              height: 40px;
              background: rgba(0, 0, 0, 0.3);
              box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.08);
              border-radius: 0px 0px 10px 0px;
              color: #fff;
              font-size: 12px;
              text-align: center;
              padding: 4px;
            }

            .topimg2 {
              font-size: 44px;
              color: #ff5c40;
              position: absolute;
              top: -5px;
              left: 15px;
              z-index: 2;
            }

            .top_num2 {
              position: absolute;
              top: 16px;
              left: 32px;
              font-size: 18px;
              color: #ffffff;
              z-index: 3;
            }
          }

          .top_main2 {
            background-color: #fff;

            .top_right2 {
              padding-top: 5px;
              padding-bottom: 5px;
              font-size: 13px;
              margin: 0 auto;
              text-align: center;

              .top_title2 {
                width: 200px;
                // height: 16px;
                margin: 3px auto;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // padding-top: 8px;
                padding-bottom: 8px;

                a {
                  margin-left: 8px;
                  margin-right: 8px;
                  font-size: 14px;
                  text-decoration: none;
                }
              }

              .top_roll2 {
                height: 25px;
                line-height: 23px;
                border-radius: 13px;
                font-size: 12px;
                width: 95%;
                margin: 0 auto;
                box-sizing: border-box;
                // padding: 0 8px;
                white-space: nowrap;
                font-family: Microsoft YaHei;
                font-weight: 400;
                // padding: 0 18px;
                text-align: center;
                border: 1px solid rgba(86, 126, 255, 0.3);
                color: #4e78ff;

                span {
                  // font-size: 16px;
                  margin-left: 5px;
                  margin-right: 5px;
                  // color: blue;
                  font-weight: bold;
                }
              }

              .top_data2 {
                height: 55px;
                font-size: 13px;
                display: flex;
                justify-content: space-around;
                align-items: center;

                p {
                  margin-top: 0 !important;
                  margin-bottom: 0 !important;
                }

                p:first-child {
                  color: #333;
                  font-size: 16px;
                  font-weight: bold;
                }
              }

              .top_data {
                height: 38px;
              }
            }

            .top_right2:focus {
              outline: none;
              outline-width: 0;
            }
          }

          .top_main2:focus {
            outline: none;
          }

          .shops_Box2 {
            // width: 100%;
            .shops_action2 {
              position: absolute;
              top: 220px;
              left: 2px;
              z-index: 1;
              opacity: 0;
              transition: all 1s initial;

              .action_box2 {
                width: 217px;
                display: flex;
                justify-content: center;
                align-items: center;

                .join_collect2 {
                  background-color: #fb522b;
                  overflow: hidden;
                  border-top-left-radius: 10px;

                  .join_btn12 {
                    background-color: #fb522b;
                    border: none;
                    margin: 0 auto;
                    padding: 7px 19px;

                    .iconimg12 {
                      display: inline-block;
                      width: 17px;
                      height: 15px;
                      overflow: hidden;
                      margin-left: -8px;
                      // background: url("~@/assets/images/icon_a.png");
                      background-position: 37px -1px;
                      // object-fit: cover;
                      transform: scale(1);
                      transition: all 0.3s initial;
                    }
                  }
                }

                .join_collect2:hover {
                  span {
                    color: #ff9;
                  }

                  .iconimg12 {
                    // transform: translate(1px);
                    // transform: scale(1.3);
                    animation: landr 0.8s ease-in-out;
                  }
                }

                .copy2 {
                  background-color: rgb(255, 129, 48);
                  overflow: hidden;
                  border-top-right-radius: 10px;

                  .join_btn22 {
                    background-color: rgb(255, 129, 48);
                    border: none;
                    padding: 7px 19px;

                    .iconimg22 {
                      display: inline-block;
                      width: 17px;
                      height: 15px;
                      overflow: hidden;
                      margin-left: -8px;
                      // background: url("~@/assets/images/icon_a.png");
                      background-position: 39px -22px;
                      // object-fit: cover;
                      transform: scale(1);
                      // transition: all 0.3s initial;
                    }
                  }
                }

                // .copy2:hover + .position_hover {
                //   display: block;
                //   opacity: 1;
                //   z-index: 999999;
                // }
                .copy2:hover {
                  span {
                    color: #ff9;
                  }

                  .iconimg22 {
                    // transform: translateX(1px), translatey(1px);
                    // transform: scale(1.3);
                    animation: landr 0.8s ease-in-out;
                  }
                }
              }
            }
          }
        }

        .hover_box2:hover {
          border-radius: 10px 10px 0 0;
          transform: translateY(-5px);

          .shops_Box2 {
            .shops_action2 {
              transition: all 300ms ease;
              -moz-transition: all 300ms ease;
              -webkit-transition: all 300ms ease;
              top: 193px;
              opacity: 1;
              z-index: 6;
            }

            // .shops_info22 {
            //   font-size: 12px;
            //   transition: all 300ms ease;
            //   -moz-transition: all 300ms ease;
            //   -webkit-transition: all 300ms ease;
            //   top: 449px;
            //   opacity: 1;
            //   z-index: 5;
            // }
          }
        }

        .hover_box {
          width: 230px;
        }
      }
    }
  }
}
</style>
